<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>layout-comment</title>
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.3/demo/demo.css">
	<script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="./jquery.parseurl.min.js"></script>
	<script type="text/javascript" src="../js/xheditor-1.2.2/xheditor-1.2.2.min.js"></script>
	<script type="text/javascript" src="../js/xheditor-1.2.2/xheditor_lang/zh-cn.js"></script>
	<script type="text/javascript" src="../js/jquery.serializeObject.js"></script>

</head>
<body>

	 <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:450px">
			<table id="dg"></table>
		</div>

		<!--修改内容的弹框-->
		<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:400px;padding:10px">
			<!--form-->
			<form id="ff" method="post">
				<div style="margin-bottom:15px">
					<input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Author:',required:true">
				</div>
				<div style="margin-bottom:15px">
					Content:
					<!--xheditor-->
					<textarea  name="content" class="xheditor" rows="8" cols="2" style="width: 100%"></textarea>
				</div>
				<div style="margin-bottom:15px">
					<input type="text" name="_id" class="easyui-textbox" style="width:100%"/>
				</div>
			</form>
			<!--button-->
			<div style="text-align:center;padding:5px 0">
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
			</div>
		</div>

    </div>



	<script type="text/javascript">
		$('#elm1').xheditor();//编辑器
		var newsId=$.parseUrl(window.location.href).query.id;
//		console.log(newsId);

		//加载对应的数据
		$('#dg').datagrid({
			rownumbers:true,
			toolbar:'#tb',
			pagination:true,
			checkbox:true,
			fit:true,
			method:'get',
			url:'http://localhost:3000/comment/returnid/'+newsId,
			columns:[[
				{field:'ck',checkbox:true},
				{field:'name',title:'评论者',width:100},
				{field:'content',title:'内容',width:500},
				{field:'date',title:'日期',width:200},
				{field:'opt',title:'操作', width:80,
					formatter: function(value,row,index){
						return "<a href='javascript:void(0)' onclick='editCommentData("+JSON.stringify(row)+")'>编辑</a> <a href='javascript:void(0)' onclick='deleteCommentData("+index+")'>删除</a>"
					}
				}
			]],
		});


		//编辑弹窗提交按钮
		function submitForm(){
			$('#ff').form('submit',{
				onSubmit:function(){
					if($(this).form('enableValidation').form('validate')){

						var data = $("#ff").serializeObject();
//          		console.log(data._id && data._id.trim().length>0)
						if(data._id && data._id.trim().length>0){
							// editMode
							$.ajax({
								method:'put',
								url:'http://localhost:3000/comment/data/' + data._id,
								data: data
							}).done(function(res){
								$('#dlg').dialog('close')
								$('#dg').datagrid('reload');
							})
						}else{
							// addMode
							delete data._id;//新增的时候id不能存在
							$.ajax({
								method:'post',
								url:'http://localhost:3000/comment/data',
								data: data
							}).done(function(res){
								$('#dlg').dialog('close')
								$('#dg').datagrid('reload');
							})
						}
					}else{
						$.messager.show({
							title:'信息提示',
							msg:'表单验证失败',
							showType:'show'
						});
					}
				}
			});
		}
		function clearForm(){
			$('#ff').form('clear');
		}

		//编辑函数
		function editCommentData(row){

			$('#ff').form('load',row);//加载数据

			$('#dlg').dialog('open');
		}

		//删除函数
		function deleteCommentData(index) {
			var rows = $("#dg").datagrid('getRows');
			var idOne = rows[index]._id;
			$.ajax({//删除
				method:'delete',
				url:'http://localhost:3000/comment/data/'+idOne,
				data:{ids:idOne.toString()}
			}).done(function (res) {
				if(res.status === 200){
					$.messager.show({
						title:'信息提示',
						msg:'删除数据成功',
						showType:'show'
					})
				}else{
					$.messager.show({
						title:'信息提示',
						msg:'删除数据成功',
						showType:'show'
					})
				}
				$('#dg').datagrid("reload")
				console.log(11);
			})
		}

	</script>
</body>
</html>
